<template>
  <div>
    <div class="list_view">
      <div style="cursor: pointer;" v-for="(item, index) in taskList" :key="index" @click="handlePreview(item)">
        <span style="width: 80px;"  :title="item.flowName">{{ item.flowName }}</span>
        <span >{{item.acceptTime?item.acceptTime:item.startTime}}</span>
      </div>
    </div>
  <PurchasePreview ref="procurementChemicals" @refresh="getList" edit></PurchasePreview>
  <ReceiptPreview ref="materialRepairApplication" @refresh="getList"></ReceiptPreview>
  <ProjectDetails ref="projectCreationApplication" @refresh="getList"></ProjectDetails>
  <OccupationPreview ref="applicationChemicals" @refresh="getList"></OccupationPreview>
  <SafetyPreview ref='safetyCheck' @refresh="getList"></SafetyPreview>
  <CourseAdjustView ref="courseAdjust" @refresh="getList"></CourseAdjustView>
  <ReservationDetail ref="labReservationApplication" @refresh="getList"></ReservationDetail>
  <SafetyTaskView ref="safetyCheckTask" @refresh="getList"></SafetyTaskView>
  <EvalutionDetail ref="labEvalution" @refresh="getList"></EvalutionDetail>
  </div>
</template>
<script>
  import {
    todoList,doneList
  } from "@/api/labdata/flowTask";
  import {commitedList}
  from "@/api/labdata/flowInstance";
  import PurchasePreview from "@/views/labdanger/dangerComps/purchasePreview.vue";
  import ReceiptPreview from "@/views/labbase/receipt_form/receipt_preview.vue"
  import ProjectDetails from "@/views/labbase/project_creation/projectDetail.vue";
  import OccupationPreview from "@/views/labdanger/dangerComps/occupationPreview.vue";
  import SafetyPreview from "@/views/labsafety/labsafetyForm/view/viewDialog.vue";
  import CourseAdjustView from "@/views/course/adjust/viewDialog.vue"
  import ReservationDetail from "@/views/labdata/reservation/reservationDetail.vue";
  import SafetyTaskView from "@/views/labsafety/labsafetyTask/view/viewDialog.vue";
  import EvalutionDetail from "@/views/evalution/labEvalution/details.vue";
  export default {
    name: "ToDoTitle",
    components: {
      PurchasePreview,
      ReceiptPreview,
      ProjectDetails,
      OccupationPreview,
      SafetyPreview,CourseAdjustView,ReservationDetail,SafetyTaskView,EvalutionDetail
    },
    data() {
      return {
        // 流程任务表格数据
        taskList: [],
        // 任务状态字典
        queryParams: {
          pageNum:1,
          pageSize:6,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    props: {
      taskType:Number,
    },
    watch:{
      taskType:function(val){
        this.queryParams.pageNum =1;
        this.getList();
      }
    },
    created() {
      this.getList();
    },
    methods: {
      handlePreview(item) {
        this.$refs[item.businessTypeOpt].handleUpdate(item);
      },
      /** 查询流程任务列表 */
      getList() {
        this.loading = true;
        if(this.taskType==1){
          todoList(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.loading = false;
          });
        }else if(this.taskType==2){
          doneList(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.loading = false;
          });
        }else if(this.taskType==3){
          commitedList(this.queryParams).then(response => {
            this.taskList = response.rows;
            this.loading = false;
          });
        }
      },
      changePage(){
        if(this.queryParams.pageSize==this.taskList.length){
          this.queryParams.pageNum = this.queryParams.pageNum +1;
        }else if(this.taskList.length<this.queryParams.pageSize){
          this.queryParams.pageNum = 1;
        }
        this.getList();
      },
    }
  };
</script>
<style type="text/css" lang="scss" scoped>
  .list_view {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5rem;
    //height: 16.5rem;
    overflow: auto;

    div {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      width: 100%;

      span {
        font-size: 1rem;
        color: #666;
      }

      span:nth-child(1) {
        margin-right: 1.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
</style>
